@charset "UTF-8";

$default-color: #FF8F1E;
$hover-color: #FFAD59;
$active-color: #FF6535;

// 辅助颜色
$blue-color: #3bb4f2;
$green-color: #5eb95e;
$orange-color: #f37b1d;
$red-color: #e6322c;

// 图表颜色
$opacity-blue-color: #9DD9F8;
$opacity-green-color: #AEDCAE;
$opacity-orange-color: #F9BD8E;
$opacity-red-color: #F29895;

// 字体颜色
$base-color: #333;
$deep-gray-color: #666;
$mid-gray-color: #999;
$light-gray-color: #ccc;
// 字体大小
$base-size: 14px;
$small-size: 12px;
$big-size: 16px;
// 底色
$base-bg-color: #f4f6f9;
// 描边色
$base-border-color: #e5e5e5;
// 输入框描边色
$base-input-color: #cfd7e6;

* {
	box-sizing: border-box;
}

.blue-bg {
	background-color: $blue-color;
}
.green-bg {
	background-color: $green-color;
}
.orange-bg {
	background-color: $orange-color;
}
.red-bg {
	background-color: $red-color;
}

.clear-both {
	content: '';
	clear: both;
	display: table;
}


.admin-home {
	background-color: #EFF3F5;
	.statistics-items { 
		&:after {
			@extend .clear-both;
		}
		.item {
			position: relative;
			color: #fff;
			float: left;
			width: 23.5%;
			height: 110px;
			margin-left: 2%;
			border-radius: 3px;
			&:first-child {
				margin-left: 0;
			}
			.info {
				&:after {
					@extend .clear-both;
				}
				.bg-iconfont {
					float: left;
					font-size: 60px;
					color: #fff;
					margin-top: 10px;
					opacity: 0.2;
					filter: alpha(opacity = 20);
				}
				.detail {
					float: right;
					text-align: right;
					margin-right: 16px;
					.num {
						font-size: 24px;
						line-height: 36px;
						margin-top: 6px;
					}
					.clasify {
						font-size: 12px;
					}
				}
			}
			.check-more {
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 10;
				padding: 0 16px 0 12px;
				background:transparent;
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1f000000,endColorstr=#1f000000);
				// zoom: 1;
				background: rgba(0, 0, 0, 0.05);
				width: 100%;
				height: 24px;
				line-height: 24px;
				color: #fff;
				font-size: 12px;
				span.name {
					float: left;
				}
				i {
					float: right;
					opacity: 0.8;
					filter: alpha(opacity = 80);
				}
			}
		}
	}
	#echarts, #panels {
		&:after {
			@extend .clear-both;
		}
		& > div {
			float: left;
			width: 49%;
			height: 400px;
			margin-top: 20px;
			background-color: #fff;
			border-radius: 3px;
			&:nth-child(odd) {
				margin-right: 2%;
			}
			.title {
				&:after {
					@extend .clear-both;
				}
				margin: 0 20px;
				height: 48px;
				line-height: 48px;
				border-bottom: 1px solid $base-border-color;
				.name {
					float: left;
					font-weight: bold;
				}

				.status {
					float: right;
					height: 100%;

					.status-item {
						display: inline-block;
						padding: 0 13px;
						height: 100%;

						&.active {
							color: #1E96F4;
							border-bottom: 2px #1E96F4 solid;
						}
					}
				}
			}
		}
		.panel{
			padding: 0 20px;
			.title {
				margin: 0;
			}
		}
		.panel-info { 
			width: 100%;
			height: 350px;
			overflow-y: auto; 
			&.have-info {
				display: inherit;
			}
			&::-webkit-scrollbar {
		    	width: 6px;
		    	height: 80px;  
		    	background: #4F4F4F;
		    	border-radius: 3px;
		    }

		    &::-webkit-scrollbar-track { 
		    	background: #F0F4F3;
		        border-radius: 10px;   
		    }

		    &::-webkit-scrollbar-thumb {
		    	width: 6px;
		    	height: 80px;
		    	border-radius: 5px;
		    	background: #C1C1C1;
		    }
		    .img {
		    	display: table-cell;
		    	vertical-align: middle;
		    	text-align: center;
		    	img {
		    		height: 60%;
		    	}
		    }

			.list {
				position: relative;
				height: 43px;
				line-height: 43px;
				border-bottom: 1px solid $base-border-color; 
				color: $base-color;
				width: 100%;
				padding-right: 130px;

				.info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.text {
						font-weight: bold;
					}
				}

				.tip {
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -11px;
					background: #E5E5E5;
					border-radius: 100px;
					line-height: 20px;
					height: 20px;
					border-radius: 100px;
					text-align: center;
					padding: 0 8px;
					font-size: 12px;

					&.success {
						color: $green-color;
						background-color: $opacity-green-color;
					}
					&.warn {
						color: $red-color;
						background-color: $opacity-red-color;
					}
				}
			}
		}
		.data-box {
			.total {
				text-align: center;
				margin: 12px 0;
				.name {
					color: $light-gray-color;
				}
				.money {
					color: $default-color;
					font-size: 18px;
				}
			}
			.list-head, .person-lists {
				margin: 0 24px;
				li {
					text-align: center;
					border-bottom: 1px solid $base-border-color;
					padding: 12px 0;
					&:after {
						@extend .clear-both;
					}
					div {
						float: left;
						width: 33%;
					}
				}
			}
			.person-lists {
				max-height: 224px;
				overflow-y: auto;
				.name {
					color: $blue-color;
				}
				&::-webkit-scrollbar {
			    	width: 6px;
			    	height: 80px;  
			    	background: #eee;
			    	border-radius: 3px;
			    }
			}
		}
	}
	#echarts {
		.title {
			.filter {
				float: right;
				&:after {
					@extend .clear-both;
				}
				div, a {
					float: left;
					border-radius: 100px;
					padding: 0 10px;
					height: 24px;
					line-height: 22px;
					margin: 12px 0 0 4px;
					float: left;
					font-size: 12px;
					background-color: #fff;
					cursor: pointer;
					&.first {
						color: $red-color;
						border: 1px solid $red-color;
						&.active {
							color: #fff;
							background-color: $red-color;
						}
					}
					&.second {
						color: $orange-color;
						border: 1px solid $orange-color;
						&.active {
							color: #fff;
							background-color: $orange-color;
						}
					}
					&.third {
						color: $blue-color;
						border: 1px solid $blue-color;
						&.active {
							color: #fff;
							background-color: $blue-color;
						}
					}
				}
				a {
					cursor: pointer;
				}
			}
		}
		.echart {
			width: 100%;
			height: 340px;
			margin-top: 12px;
			&.no-mar {
				margin-top: 0;
			}
		}
	}
	.module-items {
		&:after {
			@extend .clear-both;
		}
		.item {
			float: left;
			width: 23.5%;
			height: 80px;
			border-radius: 3px;
			background-color: #fff;
			padding-right: 24px;
			// margin: 0 2%;
			margin-left: 2%;
			&:first-child {
				margin-left: 0;
			}
			&.blue-item {
				border: 1px solid $blue-color;
				i {
					background-color: $blue-color;
				}
			}
			&.green-item {
				border: 1px solid $green-color;
				i {
					background-color: $green-color;
				}
			}
			&.orange-item {
				border: 1px solid $orange-color;
				i {
					background-color: $orange-color;
				}
			}
			&.red-item {
				border: 1px solid $red-color;
				i {
					background-color: $red-color;
				}
			}
			&:after {
				@extend .clear-both;
			}
			i {
				float: left;
				font-size: 40px;
				width: 80px;
				height: 100%;
				line-height: 80px;
				text-align: center;
				border-radius: 3px;
				color: #fff;
			}
			.info {
				float: right;
				text-align: right;
				.num {
					font-size: 24px;
					margin-top: 12px;
				}
				.name {
					font-size: 14px;
				}
			}
		}
	}
	.section {
		background-color: #fff;
		border-radius: 3px;
		margin-top: 20px;
		padding-bottom: 10px;
		.hh-header {
			padding-bottom: 0;
			// margin-right: 4%;
			.operate-btns {
				.operate-item a {
					display: block;
					background-color: $default-color;
					color: #fff;
					height: 24px;
					line-height: 24px;
					border-radius: 100px;
					padding: 0 10px;
					font-size: 12px;
				}
			}
		}
		.group-title {
			border-bottom: none;
		}
		.group-item {
			.name {
				font-size: 16px;
			}
			.hh-input-label {
				margin-right: 20%;
			}
		}
		// table {
		// 	width: 90%;
		// 	margin: 20px 5%;
		// 	thead {
		// 		background-color: $base-bg-color;
		// 		height: 36px;
		// 		line-height: 36px;
		// 		border: 1px solid  $base-bg-color;
		// 		th{
		// 			font-weight: normal;
		// 			padding-left: 44px;
		// 		}
		// 	}
		// 	tbody {
		// 		height: 36px;
		// 		line-height: 36px;
		// 		tr {
		// 			border: 1px solid $base-border-color;
		// 			td {
		// 				padding-left: 44px;
		// 				color: $light-gray-color;
		// 			}
		// 		}
		// 	}
		// }
	}
	.info-panel {
		// margin: 20px;
		margin: 20px 0;
		border: 1px solid $base-border-color;
		border-bottom: none;
		height: 176px;
		background-color: #fff;
		&:after {
			@extend .clear-both;
		}
		.main-info {
			float: left;
			width: 20%;
			height: 100%;
			text-align: center;
			border-bottom: 1px solid $base-border-color;
			img {
				height: 68px;
				margin: 30px 0 6px 0;
			}
			.tip {
				height: 24px;
				line-height: 24px;
				color: $deep-gray-color;
			}
		}
		.detail {
			float: left;
			width: 80%;
			&:after {
				@extend .clear-both;
			}
			div {
				height: 44px;
				line-height: 44px;
				float: left;
				border-bottom: 1px solid $base-border-color;
				&.name {
					width: 20%;
					background-color: $base-bg-color;
					border-left: 1px solid $base-border-color;
					border-right: 1px solid $base-border-color;
					text-align: right;
					padding-right: 20px;
				}
				&.info {
					width: 30%;
					color: $light-gray-color;
					padding-left: 20px;
				}
			}
		}
	}
}

// 筛选样式调整
.hh-filter {
	background-color: #fff;
	margin: 0 0 20px 0;
}

.hw-iframe { 
	min-height: 100%;
	border-radius: 4px;
  	// margin: 20px; 
  	border: 20px solid #EFF3F5;
  	padding-top: 0;
	min-width: 1040px; 
}